<!--
 * @Description: 
 * @Author: Ronda
 * @Date: 2021-08-10 13:23:06
 * @LastEditors: wml
 * @LastEditTime: 2022-05-17 01:24:21
-->
<template>
  <div>
    <!-- {{infoUserData}} -->
    <div class="header">
      <div class="user">
        <div class="photo">
          <van-image  round width="100%" height="100%" 
            :src="userFace"/> 
          <p class="name">{{userName}}</p>
          </div>
          <div class="flex">
            <van-row type="flex" gutter="150" class="flex_item" justify="">
              <van-col span="150" class="user-text1">账户余额</van-col>
              <van-col span="150" class="user-text2">{{userBalance}}</van-col>
            </van-row>

            <!-- 充值按钮 -->
            <div class="flex_item">
              <van-button round type="primary"
               color="linear-gradient(90deg,#7579ff,#bf73ff)"
               is-link @click="RechargePopup()">充值
              </van-button>

                <!-- 充值弹出层 -->
                <van-popup v-model="Recharge" round position="bottom" get-container="body" 
                closeable :style="{ height: '25%' }">
                  <p class="popup">充值</p>
                  <van-form @submit="onSubmit">
                    <van-field class="popup-text" v-model="momey" 
                    label="充值金额" name="rechargeMoney"
                    placeholder="请输入充值金额" border="0px" />
                    <div class="box">
                      <van-button class="popup-button" round block
                      type="primary" color="rgb(120,121,255)">提交</van-button>
                    </div>
                  </van-form>
                </van-popup>
                
                <!-- 是否充值成功 -->
                <van-notify v-model="Notifysuccess" background="rgb(10,20,30)" type="success">
                <van-icon name="bell" style="margin-right: 4px;" />
                <span>充值成功！</span>
                </van-notify>
                <van-notify v-model="Notifywarning" background="rgb(10,20,30)" type="warning">
                <van-icon name="bell" style="margin-right: 4px;" />
                <span>充值失败！</span>
                </van-notify>
            </div>
          </div>
      </div>
    </div>
    <div class="cellArea">
    <van-cell title="常用地址" icon="http://47.98.118.13/briup-ej-app/static/img/address.9bf343ab.png" 
    is-link to="address" />  
    <van-cell title="联系我们" icon="http://47.98.118.13/briup-ej-app/static/img/lianxi.9b35ecd9.png" 
    is-link to="" />     
    </div>
    <div class="logout_btn">
      <van-button round class="logout_btn" type="primary" size="large"
       color="linear-gradient(90deg,#7579ff,#bf73ff)" @click="Dialog">退出登录
       </van-button>
    </div>
    <!-- <button @click="$router.push('address')">跳转到服务地址页面</button> -->
  </div>
</template>

<script>
import {
  infoUser,accountRecharge
} from "@/api/index.js";
import { ECDH } from "crypto";

export default {
  data() {
    return {
      msg:'',
      show: false,
      
      // 是否充值成功
      Notifysuccess:false,
      Notifywarning:false,

      //  充值按钮
      Recharge:false,

       //存钱输入框
      momey: '',

      // 头像，姓名，收入
      baseUserData: [],
      tokenData:[],
      userFace:[],
      userName:[],
      userBalance:[],
    };
  },
  computed: {},
  methods: {

    //退出登录（确认、取消）的弹出框函数
    Dialog(){
        this.$dialog.confirm({
            title:'',
            message:'是否退出登录',
            confirmButtonColor:'rgb(120, 121, 255)'
        }).then(()=>{
            console.log('点击了确认')
            // window.location.href='Login';这个可以强制跳转
            // this.$router.push('Login')子页面不可用这条指令跳入父页面
            this.$router.push('/Login')
        }).catch(()=>{
            console.log('点击了取消')
        })},

    //获取当前登录用户信息
    async loadbaseUser() {
      let token = localStorage.getItem('token');
      let res = await infoUser({token});
      this.baseUserData=res.data.data;
      this.userFace=this.baseUserData.userFace;
      this.userName=this.baseUserData.username;
      this.userBalance=this.baseUserData.balance;  
    },
    async onSubmit(values){

      // 正则表达式与构造函数，通常一起使用
      var numReg = /^[0-9]+\.{0,1}[0-9]{0,2}$/;
      var numRe = new RegExp(numReg);

      // 判断充值金额是否正确，test主要是检测格式是否正确
       if (!numRe.test(values.rechargeMoney) || values.rechargeMoney==0){
        this.Notifywarningfalse();
        this.RechargePopupfalse();
      }else{
        let money = this.baseUserData.balance;
        money = money + values.rechargeMoney;
        let res = await accountRecharge({
          customerId:this.baseUserData.id, 
          money:values.rechargeMoney
          });

          // 如果当前用户的状态是200，则说明选择充值成功
        if(res.data.status == 200){
          this.RechargePopupfalse();
          this.Notifysuccess();
        }else{
          this.Notifywarningfalse();
        }
        
        this.loadbaseUser();
      }
    },

 // 充值弹出框操作
    RechargePopup(){
      this.Recharge = true;
    },

    RechargePopupfalse(){
      this.Recharge=false;
    },

// 是否充值成功，展现弹窗
    Notifysuccess() {
      this.Notifysuccess = true;
      setTimeout(() => {
        this.Notifysuccess = false;
      }, 1000);
    },
    Notifywarningfalse() {
      this.Notifywarning = true;
      setTimeout(() => {
        this.Notifywarning = false;
      }, 1000);
    },

  },
  created() {
    this.loadbaseUser();
  },
  mounted() {
  },
  };
</script>
<style scoped>
.header{
  height: 180px;
  background-image: linear-gradient(90deg,#7579ff,#bf73ff);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
  
.photo{ 
  height: 95px;
  width: 95px;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
}

.photo .name{
    width: 50%;
    margin: 0 auto;
    margin-top: 3px;
    text-align: center;
}

.user{
    width: 80%;
    height: 170px;
    background-color: #fff;
    position: absolute;
    top: 170px;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: .8;
    box-shadow: 0 0 10px #ccc;
    border-radius: 8px;
    padding: 0 1em;
}

.flex{
    display: flex;
    justify-content: space-around;
    margin-top: 110px;
}

 .flex_item{
    width: 25%;
    height: 40px;
    text-align: center;
    cursor: pointer;

} 

 .user-text1 {
    margin-top: -5px; 
    font-size: 16px;
    color: #999;
}

 .user-text2 {
    font-size: 22px;
    margin-top: 5px;
    color: #7579ff;
 }

 .popup{
   text-align: center;
   font-size: 16px;
   margin-top: 15px;
 }

 .popup-text{
   margin-top: 13px;
 }

 .popup .box{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
 }

 .popup-button{
    position: absolute;
    left: 5%;
    width: 90%;
    height: 25%;
    margin-top: 7px;
    
 }

.cellArea {
    margin: 130px auto;
    box-shadow: 4px 4px 4px 0 rgb(158 117 255 / 20%);
    transition: .3s;
    width: 95%;
    border-radius: 5px;
}

.van-icon__image {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.van-cell__title, .van-cell__value {
    font-size: 16px;
    margin-left: 10px;
}

.logout_btn {
    width: 70%;
    height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 22px;
    line-height: 40px;
    margin: 0 auto;
    margin-top: 25pxS;
    cursor: pointer;
}

</style>